
var vue = new Vue({
    el:'#myOrderId',
    data:{
        sendOrderQueryActive:'请选择查询类型',//我寄的订单搜索下拉框信息
        prerecord:[],  //预录单对象数组
        sendOrder:[],  //我寄的订单对象数组
        sendOrderInfo:{}, //我寄的订单 对象
        putOrder:[],   //我收的订单对象数组
        pageUtil:{    //分页工具

            curPage:1, //当前页
            rows:10,   //行数
            pageCount:0,  //总行数

        },
        sendPageUtil:{   //我的寄件 分页工具
            curPage:1,  //当前页
            rows:10,  //行数
            pageCount:0,  //总行数
        },
        putPageUtil:{    //我的收件 分页工具
            curPage:1,  //当前页
            rows:10,    //行数
            pageCount:0,  //总行数
        },
        sendOrderTail:[],  //我寄的订单跟踪对象数组
        sendOrderTailHtml:'',  //寄件订单跟踪html
        complainInfo:{
            phone:'',//手机
            name:'',
            issueType:'虚假签收',
            goodsType:'',
            complainCause:'',  //投书原因
            phoneMsg:'',  //手机验证信息
            phoneVerifyCss:'',  //手机验证样式
            nameMsg:'', //姓名验证信息
            nameVerifyCss:'',  //姓名验证样式
            complainCauseMsg:'',  //投诉原因验证消息
            complainCauseVerifyCss:'',  //投诉原因验证样式

        }, //投诉内容对象
        goodsType:[],  //货物类型数组
        complainShow:false,  //投诉界面显示变量
        cpmplainExist:{},  //已存在投诉工单信息
        sendOrderQuery:{
            queryType:'',//查询类型
            startDate:'',  //下单开始时间
            endDate:'', //结束时间
            orderStatus:10,  //订单状态
        }
    },
    mounted:function () {
        //获取预录单对象数组
        this.queryPrerecord();
        //获取订单对象数组
        this.queryOrderAddress();
        //获取我收的订单对象数组
        this.queryPutOrder();

    },
    methods:{
        //预录单分页
        prerecordPage:function(page,event){
            var it = this;

            $("a[name='prePageName']").each(function (item,index) {

                if ($(this).text() == page){
                    $(this).addClass("bg-warning");
                } else{

                    $(this).removeClass("bg-warning")
                }


            })

            axios({
                url:'/logistics/customer/queryPrerecord?page='+page+'&rows='+it.pageUtil.rows,
                method:'get'
            }).then(function (res) {

                //给预录单对象数组赋值
                it.prerecord = res.data.data.data;

            }).catch(function (error) {


            })



        },
        //获取预录单对象数组
        queryPrerecord:function () {
            var it = this;

            axios({
                url:'/logistics/customer/queryPrerecord?page='+1+'&rows='+it.pageUtil.rows,
                method:'get'
            }).then(function (res) {

                //给预录单对象数组赋值
                it.prerecord = res.data.data.data;

                //获取总行数  res.data.data.pageCount

                //算出总页数
                it.pageUtil.pageCount = parseInt((res.data.data.pageCount+it.pageUtil.rows-1)/it.pageUtil.rows);

            }).catch(function (error) {


            })

        },
        //查看预录单详情信息
        prerecordInfo:function (index) {
            var it = this;
            var couponName = "无抵用卷";
            if (it.prerecord[index].couponId != null && it.prerecord[index].couponId != 0){
                $.ajax({
                    url:'/logistics/customer/queryCouponById/'+it.prerecord[index].couponId,
                    type:'get',
                    dataType:'json',
                    async: false,
                    success:function (res) {
                        couponName = res.data.name;
                    }
                })
            }


            //交付方式
            var makeCargoMethod = "";
            if (it.prerecord[index].putSendInfos[1].makeCargoMethod == 0){
                makeCargoMethod = "上门取货";
            }else{
                makeCargoMethod = "送货上门";
            }

            //拼接html
            var html = '<div class="row">' +
                            '  <div class="col-sm-12">' +
                                '<img class="mr-4" src="/static/logistics/home/img/prerecord.png">' +
                                '<span class="text-secondary mr-3">预录单号</span>' +
                                '<span class="text-primary">'+it.prerecord[index].preRecordedId+'</span>' +
                                '<hr class="my-3">' +
                            '</div>' +
                            '<div class="col-sm-12">' +
                                '<img class="mr-4" src="/static/logistics/home/img/sendIcon.png">' +
                                '<span class="text-body font-weight-normal mr-3">'+it.prerecord[index].putSendInfos[1].putSendName+'</span>' +
                                '<span class="text-body font-weight-normal mr-3">'+it.prerecord[index].putSendInfos[1].putSendPhone+'</span>' +
                                '<span class="text-body font-weight-normal">'+it.prerecord[index].putSendInfos[1].putSendArea+'&nbsp'+it.prerecord[index].putSendInfos[1].putSendDetailaddress+'</span>' +
                                '<hr class="my-3">' +
                            '</div> ' +
                            '<div class="col-sm-12">' +
                                '<img class="mr-4" src="/static/logistics/home/img/putIcon.png">' +
                                '<span class="text-body font-weight-normal mr-3">'+it.prerecord[index].putSendInfos[0].putSendName+'</span>' +
                                '<span class="text-body font-weight-normal mr-3">'+it.prerecord[index].putSendInfos[0].putSendPhone+'</span>' +
                                '<span class="text-body font-weight-normal">'+it.prerecord[index].putSendInfos[0].putSendArea+'&nbsp'+it.prerecord[index].putSendInfos[0].putSendDetailaddress+'</span>' +
                                '<hr class="my-3">' +
                            '</div>' +
                            '<div class="col-sm-1">' +
                                '<img class="mr-4" src="/static/logistics/home/img/goodsIcon.png">' +
                            '</div>' +
                            '<div class="col-sm-5">' +
                                '<div class="row">' +
                                    '<div class="col-sm-12">' +
                                        '<span class="text-secondary font-weight-normal mr-2">物品名称</span>' +
                                        '<span class="text-body font-weight-normal">文件</span>' +
                                    '</div>' +
                                    '<div class="col-sm-12">' +
                                        '<span class="text-secondary font-weight-normal mr-2">时效产品</span>' +
                                        '<span class="text-body font-weight-normal">普快</span>' +
                                    '</div>' +
                                    '<div class="col-sm-12">' +
                                        '<span class="text-secondary font-weight-normal mr-2">抵用券</span>' +
                                        '<span class="text-body font-weight-normal">'+couponName+'</span>' +
                                    '</div>' +
                                '</div>' +
                            '</div>' +

                            '<div class="col-sm-6">' +
                                '<div class="row">' +
                                    '<div class="col-sm-12">' +
                                        '<span class="text-secondary font-weight-normal mr-2">下单时间</span>' +
                                        '<span class="text-body font-weight-normal">'+it.prerecord[index].orderTime+'</span>' +
                                    '</div>' +
                                    '<div class="col-sm-12">' +
                                        '<span class="text-secondary font-weight-normal mr-2">特殊备注</span>' +
                                        '<span class="text-body font-weight-normal">'+it.prerecord[index].remark+'</span>' +
                                    '</div>' +
                                    '<div class="col-sm-12">' +
                                        '<span class="text-secondary font-weight-normal mr-2">交付方式</span>' +
                                        '<span class="text-body font-weight-normal">'+makeCargoMethod+'</span>' +
                                    '</div>' +
                                '</div>' +
                            '</div>' +
                            '<hr class="my-3">' +
                        '</div>';

            SimpleBsDialog.show({
                width:'40%',
                height:'50%',
                title: '预录单信息',
                html: ''+html
            });

        },
        //获取我寄的订单信息
        queryOrderAddress:function () {
            var it = this;
            axios({
                url:'http://localhost:8080/logistics/customer' +
                    '/queryOrderAddress?page='+it.sendPageUtil.curPage+'&rows='+it.sendPageUtil.rows,
                method:'get',

            }).then(function (res) {

                //接收我寄的订单数组对象
                it.sendOrder =  res.data.data.data;
                //算出总页数
                it.sendPageUtil.pageCount = parseInt((res.data.data.pageCount+it.sendPageUtil.rows-1)/it.sendPageUtil.rows);


            }).catch(function (error) {

                console.log("出错了！！！")

            })

        },
        //查询订单具体情况
        detailsOrderInfo:function (index) {
            var it = this;
            //特殊备注
            var remark = "无";
            if (it.sendOrder[index].remark != null && it.sendOrder[index].remark != '') {
                remark = it.sendOrder[index].remark;
            }

            //交付方式
            var makeCargoMethod = "";
            if (it.sendOrder[index].putSendInfos[1].makeCargoMethod == 0){
                makeCargoMethod = "上门取货";
            }else{
                makeCargoMethod = "送货上门";
            }
            var tailHtml = '';
            //使用ajax异步请求
            $.ajax({
                url:'/logistics/customer/queryOrderTailByOrderId/'+it.sendOrder[index].id,
                type:'get',
                dataType:'json',
                async: false,
                success:function (res) {
                    it.sendOrderTail = res.data;

                    for (var i=0;it.sendOrderTail.length > i;i++){
                        if (it.sendOrderTail[i].orderTailRemark == null){
                            it.sendOrderTail[i].orderTailRemark = '无';
                        }
                        tailHtml+='  <a href="javascript:void(0);" class="list-group-item list-group-item-action">\n' +
                            '    <p class="mb-1">'+it.sendOrderTail[i].orderTailIncident+'' +
                            '<span class="ml-1">备注:'+it.sendOrderTail[i].orderTailRemark+'</span>' +
                            '</p>\n' +
                            '    <small>'+it.sendOrderTail[i].orderTailTime+'</small>\n' +
                            '  </a>\n';

                    }

                }
            })
            var couponName = "未使用抵用卷";
            //根据优惠卷id获取优惠卷信息
            if (it.sendOrder[index].couponId != 0 && it.sendOrder[index].couponId != null){

                $.ajax({
                    url:'/logistics/customer/queryCouponById/'+it.sendOrder[index].couponId,
                    type:'get',
                    dataType:'json',
                    async: false,
                    success:function (res) {
                        couponName = res.data.name;
                    }
                })

            }

            //拼接html
            var html = '<div class="row">' +
                '<div class="col-sm-12">' +
                    '<img class="mr-4" src="/static/logistics/home/img/prerecord.png">' +
                    '<span class="text-secondary mr-3">订单号</span>' +
                    '<span class="text-primary">' + it.sendOrder[index].courierOdd + '</span>' +
                    '<hr class="my-3">' +
                '</div>' +
                '<div class="col-sm-12">' +
                    '<img class="mr-4" src="/static/logistics/home/img/sendIcon.png">' +
                    '<span class="text-body font-weight-normal mr-3">' + it.sendOrder[index].putSendInfos[1].putSendName + '</span>' +
                    '<span class="text-body font-weight-normal mr-3">' + it.sendOrder[index].putSendInfos[1].putSendPhone + '</span>' +
                    '<span class="text-body font-weight-normal">' + it.sendOrder[index].putSendInfos[1].putSendArea + '&nbsp' + it.prerecord[index].putSendInfos[1].putSendDetailaddress + '</span>' +
                    '<hr class="my-3">' +
                '</div> ' +
                '<div class="col-sm-12">' +
                    '<img class="mr-4" src="/static/logistics/home/img/putIcon.png">' +
                    '<span class="text-body font-weight-normal mr-3">' + it.sendOrder[index].putSendInfos[0].putSendName + '</span>' +
                    '<span class="text-body font-weight-normal mr-3">' + it.sendOrder[index].putSendInfos[0].putSendPhone + '</span>' +
                    '<span class="text-body font-weight-normal">' + it.sendOrder[index].putSendInfos[0].putSendArea + '&nbsp' + it.prerecord[index].putSendInfos[0].putSendDetailaddress + '</span>' +
                    '<hr class="my-3">' +
                '</div>' +
                '<div class="col-sm-1">' +
                    '<img class="mr-4" src="/static/logistics/home/img/goodsIcon.png">' +
                '</div>' +
                '<div class="col-sm-5">' +
                    '<div class="row">' +
                        '<div class="col-sm-12">' +
                            '<span class="text-secondary font-weight-normal mr-2">物品名称</span>' +
                            '<span class="text-body font-weight-normal">文件</span>' +
                        '</div>' +
                        '<div class="col-sm-12">' +
                            '<span class="text-secondary font-weight-normal mr-2">时效产品</span>' +
                            '<span class="text-body font-weight-normal">普快</span>' +
                        '</div>' +
                        '<div class="col-sm-12">' +
                            '<span class="text-secondary font-weight-normal mr-2">抵用券</span>' +
                            '<span class="text-body font-weight-normal">'+couponName+'</span>' +
                        '</div>' +
                    '</div>' +
                '</div>' +

                '<div class="col-sm-6">' +
                    '<div class="row">' +
                        '<div class="col-sm-12">' +
                            '<span class="text-secondary font-weight-normal mr-2">下单时间</span>' +
                            '<span class="text-body font-weight-normal">' + it.sendOrder[index].orderDate + '</span>' +
                        '</div>' +
                        '<div class="col-sm-12">' +
                            '<span class="text-secondary font-weight-normal mr-2">特殊备注</span>' +
                            '<span class="text-body font-weight-normal">' + remark + '</span>' +
                        '</div>' +
                        '<div class="col-sm-12">' +
                            '<span class="text-secondary font-weight-normal mr-2">交付方式</span>' +
                            '<span class="text-body font-weight-normal">' + makeCargoMethod + '</span>' +
                        '</div>' +
                    '</div>' +

                '</div>' +

                //物流轨迹
                '<div class="col-sm-12">' +
                '<hr class="my-3">' +
                '<div class="accordion" id="accordionExample">\n' +
                '  <div class="card">\n' +
                '    <div class="card-header p-1" id="headingOne">\n' +
                '      <h2 class="mb-0">\n' +
                        '<a class="btn btn-link btn-block text-left" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">' +
                            '<img class="mr-4" src="/static/logistics/home/img/tail.png">' +
                            '<span class="text-secondary mr-3">物流轨迹</span>' +
                            '<i class="pull-right fa fa-angle-right"></i>' +
                        '</a>' +
                '      </h2>\n' +
                '    </div>\n' +
                '\n' +
                '    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">\n' +
                '      <div class="card-body">\n' +
                        //订单跟踪事件
                '        <div class="list-group">\n' +tailHtml+'</div>\n' +
                '      </div>\n' +
                '    </div>\n' +
                '  </div>\n' +
                '</div>' +

                '</div>' +
                '<hr class="my-3">' +
                '</div>';

            SimpleBsDialog.show({
                width:'40%',
                height:'50%',
                title: '我寄的订单信息',
                html: ''+html
            });


        },
        //我寄的订单投诉按钮
        sendOrderComplain:function (index) {

            var it = this;

            //根据下标获取订单对象
            it.sendOrderInfo = it.sendOrder[index];
            //获取投诉状态
            axios({
                url:'/logistics/customer/queryWorkOrderByOrderNoAndCustomerId?orderNo='+it.sendOrderInfo.courierOdd,
                method:'get'
            }).then(function (res) {

                if (res.data.data != null){
                    it.complainShow = true;

                    it.cpmplainExist = res.data.data;

                }else{
                    it.complainShow = false;
                }

            }).catch(function (error) {
                console.log("异常！！！")
            })



            //获取货物类型
            axios({
                method: 'get',
                url: '/logistics/customer/queryAllGoodsType'
            }).then(function (res) {

                it.goodsType = res.data.data
                //给货物类型下拉框默认值
                it.complainInfo.goodsType = it.goodsType[0].goodsId;

            }).catch(function (error) {
                console.log('请求失败:' + err.status + ',' + err.statusText);
            });

            //打开模态框
            $('#complainModal').modal('show')

        },
        //提交我寄的订单投诉
        submitComplain:function () {
            var it = this;
            console.log("正确")
            if (it.complainInfo.nameMsg != "" || it.complainInfo.phoneMsg != "" || it.complainInfo.complainCauseMsg.trim() != ""){

                $('#submitcomplainMessage').addClass("d-block");

                return false;
            }

            if (it.complainInfo.name == "" || it.complainInfo.phone == "" || it.complainInfo.complainCause == ""){
                $('#submitcomplainMessage').addClass("d-block");

                return false;
            }

            $('#submitcomplainMessage').addClass("d-none");

            $.ajax({
                url:'/logistics/customer/addWorkOrder',
                type:'post',
                data:{
                    orderNo:it.sendOrderInfo.courierOdd,
                    customerName:it.complainInfo.name,
                    customerTel:it.complainInfo.phone,
                    questionType:it.complainInfo.issueType,
                    workOrderStatus:0,
                    customerContent:it.complainInfo.complainCause,
                    replyContent:""
                },
                dataType:'json',
                success:function (res) {
                    if (res.code == 200){
                        $.toast({
                            title: '信息提示框',
                            subtitle: '10秒后自动关闭',
                            content: '您已投诉成功,具体可到我的工单查看',
                            type: 'success',
                            delay: 10000,
                            pause_on_hover: false
                        });
                    }else{

                        $.toast({
                            title: '信息提示框',
                            subtitle: '10秒后自动关闭',
                            content: '投诉失败，重新试试',
                            type: 'error',
                            delay: 10000,
                            pause_on_hover: false
                        });

                    }
                    //下单后跳到顶部
                    window.scrollTo({
                        left: 0,
                        top: 0,
                        behavior: 'smooth'
                    })
                }
            })

            /*axios({
                url:'/logistics/customer/addWorkOrder',
                data:{
                    orderNo:it.sendOrderInfo.courierOdd,
                    customerName:it.complainInfo.name,
                    customerTel:it.complainInfo.phone,
                    questionType:it.complainInfo.issueType,
                    workOrderStatus:0,
                    customerContent:it.complainInfo.complainCause,
                    replyContent:""

                },
                method:'post'
            }).then(function (res) {



            }).catch(function (error) {

            })*/

        },
        //取消预录单
        offPrerecord:function (prerecordId,index) {
            var it = this;
            var msg = "您真的确定要取消预录单吗？\n\n请确认！";
            if (confirm(msg)==true){
                //取消预录单
                $.ajax({
                    url:'/logistics/customer/updatePrerecordById',
                    type:'post',
                    async: false,
                    data:{
                        orderStatus:3,
                        prerecordId:prerecordId
                    },
                    dataType:'json',
                    success:function (res) {
                        it.prerecord[index].orderState = 3;
                        if (res.code == 200){

                            //取消成功
                            $.toast({
                                title: '信息提示框',
                                subtitle: '10秒后自动关闭',
                                content: '取消预录单成功',
                                type: 'success',
                                delay: 10000,
                                pause_on_hover: false
                            });

                        }else{

                            $.toast({
                                title: '信息提示框',
                                subtitle: '10秒后自动关闭',
                                content: '取消预录单失败',
                                type: 'error',
                                delay: 10000,
                                pause_on_hover: false
                            });

                        }

                    }
                })
                return true;
            }else{

                return false;
            }


        },
        //选择我寄的订单查询类型下拉框
        sendOrderQueryClick:function (type) {

            this.sendOrderQueryActive = type;

        },
        //我寄的订单查询按钮
        queryConditionSendOrderSubmit:function () {

            var it = this;
            var type = 'courierOdd';
            if (it.sendOrderQueryActive == '订单号'){
                type = 'courierOdd';
            }else if(it.sendOrderQueryActive == '寄件人'){
                type = 'sendName';
            }else if(it.sendOrderQueryActive == '收件人'){
                type = 'putName';
            }else if(it.sendOrderQueryActive == '寄件人手机'){
                type = 'sendPhone';
            }else if(it.sendOrderQueryActive == '收件人手机'){
                type = 'putPhone';
            }

            var queryType = 0;
            if (it.sendOrderQuery.queryType.trim() == "" || it.sendOrderQuery.queryType == null){
                queryType = 0;
            }else{
                queryType = 1;
            }
            console.log(it.sendOrderQuery.orderStatus)
            axios({
                url:'/logistics/customer/querySendOrderByNoOrNameOrPhoneOrDate?'+type+"=" +it.sendOrderQuery.queryType
                    +"&orderStartDate=" +$('#datepicker').val()
                    +"&orderEndDate=" +$('#datepicker2').val()
                    +"&orderStatus=" +it.sendOrderQuery.orderStatus
                    +"&queryType="+queryType,
                method:'get',

            }).then(function (res) {

                //接收我寄的订单数组对象
                it.sendOrder =  res.data.data;
                console.log(it.sendOrder)
            }).catch(function (error) {

                console.log("出错了！！！")

            })

        },
        //我收的订单查询
        queryPutOrder:function () {

            var it = this;
            //获取查询的起始日期
            var startDate = $('#datepicker3').val();
            //获取查询的结束日期
            var endDate = $('#datepicker4').val();
            axios({
                url:'/logistics/customer/queryPutOrder?page='+it.putPageUtil.curPage
                    +"&rows="+it.putPageUtil.rows
                    +"&orderStartDate="+startDate
                    +"&orderEndDate="+endDate,
                method:'get'
            }).then(function (res) {
                //获取数组对象
                it.putOrder = res.data.data.data;

                //算出总页数
                it.putPageUtil.pageCount = parseInt((res.data.data.pageCount+it.putPageUtil.rows-1)/it.putPageUtil.rows);


            }).catch(function (error) {

                console.log("异常啦！"+error)

            })

        },
        //我收的订单分页
        putOrderPage:function (page) {

            var it = this;

            $("a[name='putPageName']").each(function (index,item) {

                if ($(this).text() == page){

                    $(this).addClass("bg-warning");

                }else{
                    $(this).removeClass("bg-warning");
                }

            })

            axios({
                url:'/logistics/customer/queryPutOrder?page='+it.putPageUtil.curPage+"&rows="+it.putPageUtil.rows,
                method:'get'
            }).then(function (res) {
                //获取数组对象
                it.putOrder = res.data.data.data;

            }).catch(function (error) {

                console.log("异常啦！"+error)

            })


        }

    },
    watch:{
        'complainInfo.name':function (newValue,oldValue) {

            if (newValue.trim() === ''){
                this.complainInfo.nameMsg = "姓名不可为空";
                this.complainInfo.nameVerifyCss = "is-invalid";

            }else{
                this.complainInfo.nameMsg = "";
                this.complainInfo.nameVerifyCss = "is-valid";

            }

        },
        'complainInfo.phone':function (newValue,oldValue) {

            if (newValue.trim() === ''){
                this.complainInfo.phoneMsg = "手机不可为空";
                this.complainInfo.phoneVerifyCss = "is-invalid";
            }else if(!(/^1([38]\d|5[0-35-9]|7[3678])\d{8}$/.test(newValue))){

                this.complainInfo.phoneMsg = "输入手机联系方式有误";
                this.complainInfo.phoneVerifyCss = "is-invalid";

            }else{
                this.complainInfo.phoneMsg = "";
                this.complainInfo.phoneVerifyCss = "is-valid";

            }

        },
        'complainInfo.complainCause':function (newValue,oldValue) {

            if (newValue === ''){

                this.complainInfo.complainCauseMsg = "投诉原因不可为空";
                this.complainInfo.complainCauseVerifyCss = "is-invalid";
            }else{
                this.complainInfo.complainCauseMsg = "";
                this.complainInfo.complainCauseVerifyCss = "is-valid";
            }

        }


    }
})
